<div cdkFocusInitial mat-dialog-content>
	<mat-tab-group (selectedTabChange)="$event.index === 3 ? dialogRef.close() : undefined">
		<mat-tab label="Parameters">
			<table class="settings">
				<ng-container *ngFor="let cat of Object.keys(configuration.configs)">
					<tr *ngIf="cat.length">
						<td colspan="100%">
							<div style="display: flex; width: 100%; align-items: center;">
								<mat-divider style="flex: 1;"></mat-divider>
								<h4 style="margin: 12px;">{{ cat }}</h4>
								<mat-divider style="flex: 1;"></mat-divider>
							</div>
						</td>
					</tr>

					<tr *ngFor="let config of configuration.configs[cat]">
						<td>{{ config.description }}</td>
						<td>
							<mat-button-toggle-group
								(change)="update(config.name, $event.value)"
								[value]="configuration.getByName(config.name)?.value">
								<mat-button-toggle
									*ngFor="let value of config.values"
									[value]="value">
									{{ value }}
								</mat-button-toggle>
							</mat-button-toggle-group>
						</td>
					</tr>
				</ng-container>
			</table>
		</mat-tab>
		<mat-tab label="Shortcuts">
			<div class="shortcuts" *ngFor="let cat of Object.keys(shortcuts)">
				<h4 *ngIf="cat.length">
					<mat-divider style="flex: 1;"></mat-divider>
					<span style="margin: 12px;">{{ cat }}</span>
					<mat-divider style="flex: 1;"></mat-divider>
				</h4>

				<div class="keys" *ngFor="let shortcut of Object.keys(shortcuts[cat])">
					<span>{{ shortcut }}</span>
					<div *ngFor="let keys of shortcuts[cat][shortcut]">
						{{ keys }}
					</div>
				</div>
			</div>
		</mat-tab>
		<mat-tab>
			<ng-template mat-tab-label>
				About
				<span *ngIf="!data.upToDate" class="notification" style="top: 6px; right: inherit; margin-left: 55px;">
					●
				</span>
			</ng-template>
			<div style="text-align: center">
				<div style="font-weight: 300; font-size: 30px;">
					<img alt="logo" id="logo" src="/assets/webdb.svg"
						 style="height: 60px; margin: 30px 4px; width: auto; vertical-align: middle;"/>
					WebDB
				</div>

				<h3 style="text-align: center; margin-bottom: 20px">
					Version {{ packageJson.version }}

					<a color="primary"
					   href="https://docs.webdb.app/installation/standalone"
					   mat-flat-button
					   style="margin-left: 20px"
					   target="_blank">
						<span class="material-symbols-outlined">
							{{ data.upToDate ? 'check_circle' : 'release_alert' }}
						</span>
						{{ data.upToDate ? 'Up to date' : 'New version available' }}
					</a>
				</h3>

				<mat-divider></mat-divider>

				<div class="mat-dialog-actions">
					<a href="https://patreon.com/WebDB?utm_medium=unknown&utm_source=join_link&utm_campaign=creatorshare_creator&utm_content=copyLink"
					   mat-button
					   target="_blank">
						<mat-icon svgIcon="patreon"></mat-icon>
						Sponsor
					</a>

					<a href="https://github.com/WebDB-App/app"
					   mat-button
					   target="_blank">
						<mat-icon svgIcon="github"></mat-icon>
						Sources
					</a>

					<a href="https://hub.docker.com/r/webdb/app"
					   mat-button
					   target="_blank">
						<mat-icon svgIcon="docker"></mat-icon>
						Docker
					</a>

					<a href="https://webdb.app"
					   mat-button
					   target="_blank">
						<span class="material-symbols-outlined notranslate">
							public
						</span>
						Website
					</a>

					<a href="mailto:main.webdb@gmail.com"
					   mat-button
					   target="_blank">
						<span class="material-symbols-outlined notranslate">
							mail
						</span>
						Contact
					</a>
				</div>

				<mat-divider></mat-divider>

				<div class="mat-dialog-actions">
					Copyright © {{ currentYear }} WebDB
				</div>
			</div>
		</mat-tab>
		<mat-tab label="⨉"></mat-tab>
	</mat-tab-group>
</div>
